﻿<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>卡面设计</title>
    <script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="../../Scripts/ajaxfileupload.js" type="text/javascript"></script>
    <link href="../../Content/Themes/blue2/css.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        *{ margin:0px; padding:0px;}
    .tep_head{ border-bottom:solid 1px #C6E2FF; background-color:#5291E2; font-size:16px; font-weight:bold;}
    .tep_lis{border-bottom:solid 1px #C6E2FF;}
    .templateName{border: solid 1px #C6E2FF;}
    .templateName  ul li{ padding:10px 10px 10px 10px; text-align:center;}
    .templateName{ float:left; width:200px;}
    .showTemplate{ float:left; margin-left:20px;}
    .back{ font-weight:bold;   border:solid 2px #5291E2; color:#5291E2;}
    .clickColor{ background-color:#bed3ef;color:#5291E2;font-weight:bold; }
    .select-bar{padding:0 20px; float:left;}
     .select-bar select{width:120px;height:160px;border: solid 1px #abadb3;outset;padding:4px;}
     .btn-bar{ float:left;}
     .show_maintep{float:left; width:750px; height:200px; margin-left:50px;}
     .showX{  float:left;  width:416px; height:400px;padding-top:30px; }
     .show_tep{  float:left; border:solid 1px #C6E2FF;  width:356px; height:200px;   padding-top:30px; padding-left:60px; }
     .show_dgv{ width:250px; height:200px; float:left;  margin-left:10px; padding-top:40px;  padding-left:20px;}
     .show_tabel td{  line-height:15px;}
     .txt_dgv{ width:225px; height:30px;}
     .show_option{ width:500px; height:250px; margin-top: 20px;}
     .itemLabel{ display:inline-block;margin-bottom:5px;  }
    </style>
</head>
<body class="main">
     <div class="AllWebTopDiv">
        <div class="path">
            <div class="nav">
                <a href="#">卡面设计</a>
            </div>
        </div>
        <div class="content" style=" height:600px;">
        <div class="templateName">
          <ul class="tep_UL">
          <li class="tep_head">模板</li>
        
          </ul>
        </div>
        <div class="show_maintep">
        <div class="showX">
          <div class="show_tep" id="show_tep">
          
          </div>
        </div>
        <div class="show_dgv">
          <table class="show_tabel">
           <tr>
            <td style="text-align:right;padding-bottom:20px;">
            <label>模板名称：</label>
           
            </td>
            <td style=" padding-bottom:20px;"><input  type="text" class="Line" id="tep_name"/></td>
            <td> <input  type="button" value="关闭" id="btn_cancel" onclick="closeWindows();"  class="button2"/></td>
          </tr>
          <tr>
            <td style="text-align:right"><label>广告内容：</label></td>
            <td><textarea class="txt_dgv"></textarea></td>
            <td style="padding-left:5px;"><input  type="button" class="button2" value="添加" onclick="add_dgv()"/></td>
          </tr>
          <tr>
           <td colspan="3" style="padding-top:20px;">
           <input type="button" id="btn_save" class="button2" value="保存" onclick="save_tep()" style="margin-left:20px;"/>
           <input type="button" class="button2" value="清空" onclick="remove_all()" style="margin-left:20px;"/>
           <label style="  margin-left:20px;">导图：</label>
           <input  type="file" id="fileUP" name="fileUP"  style=" width:150px;" onchange="ajaxFileUpload()" />
            
           
           </td>
            
          </tr>
          </table>
          <div class="show_option">
        <div class="select-bar">
         <table>
         <tr><td  style="background:#D1E1F4; border: solid 1px #abadb3;border-bottom: none; padding: 5px 0 3px 0px;" >
         未加入项目</td></tr>
         <tr><td>
		<select multiple="multiple" id="select1">
			<option value="677">会员卡号</option>
	<option value="782">卡片类型</option>
	<option value="188">会员姓名</option>
	<option value="404">性　　别</option>
	<option value="398">卡片状态</option>
	<option value="438">办卡日期</option>
	<option value="399">截止日期</option>
	 <option value="399">累计积分</option>
     <option value="399">本次积分</option>
     <option value="399">可用积分</option>
     <option value="399">本次消费</option>
     <option value="399">储值余额</option>
     <option value="399">折扣金额</option>
     <option value="399">本次充值</option>
     <option value="399">空　　行</option>
		</select>
        </td>
        </tr>
        </table>
	</div>
	
	<div class="btn-bar">
		<span id="add"><input type="button" class="button" style=" margin-top:60px;" value="添加→"/></span><br />
		 <span id="remove"><input type="button" class="button" style=" margin-top:10px;" value="移除←"/></span>
	</div>
	
	<div class="select-bar">
     <table>
         <tr><td  style="background:#D1E1F4; border: solid 1px #abadb3;border-bottom: none; padding: 5px 0 3px 3px" >
         已加入项目</td></tr>
         <tr><td>
          <select multiple="multiple" id="select2"></select>
        </td>
        </tr>
        </table>
      </div>
      <div class="btn-bar">
		<span id="Span1"><input type="button" class="button" style=" margin-top:30px;" value="置顶 " onclick="toTop()" /></span><br />
		<span id="Span2"><input type="button" class="button" style=" margin-top:10px;" value="上移↑" onclick="UP()"/></span><br />
		<span id="Span3"><input type="button" class="button" style=" margin-top:10px;" value="下移↓" onclick="Down()" /></span><br />
		<span id="Span4"><input type="button" class="button" style=" margin-top:10px;" value="置底" onclick="toBottom()"/></span><br />
	   </div>
       </div>
        </div>
        
      </div>
      </div>   
        
     </div>
</body>
</html>
<script type="text/javascript">

  //加载模板
   $.ajax({
             type:"POST",
             url:"<%:Url.Action("getTepName","CardTemplateDesignMain") %>",
             data:"",
             cache:false,
             success:function(html){
             $(".tep_UL").append(html);
             }
           })   

    var single = false;
   // document.getElementById("show_tep").style.backgroundImage = "url(../../Content/SelfAdd/tep_backgd.jpg)";
    function tep_Over(o) {
        $(o).addClass("back");
    }
    function tep_Out(o) {
        $(o).removeClass("back");
    }
    //选择编辑模板
    function tep_Click(o) {
        var lis = document.getElementsByTagName("li");
      
        for (var i = 0; i < lis.length; i++) { 
            if (lis[i].innerHTML != "模板") {
                if (lis[i] != o) {
                    $(lis[i]).removeClass("clickColor");
                }
                else {
                    $(lis[i]).addClass("clickColor");
                }
            }
        }

        var tepName=$(o).text();
         $.ajax({
             type:"POST",
             url:"<%:Url.Action("getTepByTepName","CardTemplateDesignMain") %>",
             data:"tepName="+tepName,
             cache:false,
             success:function(txt){
                   $(".show_tep").children().remove();
                   $("#select2 option").remove();
                    var items=new Array();
                    var str="";
                    var options="";
                    var items=txt.toString().split('\n');
                    for(var i=0;i<items.length;i++)
                    {
                      
                       if( parseInt(items[i].length) > 2){
                         $("#select2").append("<option>"+items[i]+"</option>");
                          str+="<label class=\"itemLabel\">" + items[i] + "</label><br/>"
                       } 
                    }
                   $(".show_tep").append(str);
             }
           })   
         $("#tep_name").val(tepName);
         $("#btn_save").val("更新");
    }
    //保存
    function save_tep() {
       if($("#tep_name").val()==""||$(".show_tep").children().text()==""){ 
            alert("模板名称不能为空");
            return false;
       }
       
        var tep_name = $("#tep_name").val();
        var itemTep = "\r\n";
        var length = $(".show_tep").children('label').length;
        for (var i = 0; i < length; i++) {
           itemTep +=$(".show_tep").children('label').eq(i).text() + "\n";
        
        }
          if( $("#btn_save").val()=="更新"){

             $.ajax({
                   type:"POST",
                   url:"<%:Url.Action("Update_tep","CardTemplateDesignMain") %>",
                   data:"tep_name="+tep_name+"&itemTep="+itemTep+"",
                   cache:false,
                   success:function(txt){
                     alert(txt);
                     window.location.href="<%:Url.Action("CardTemplateDesignMain","CardTemplateDesignMain") %>"
                     }
                  })  

          }
          else{
          
           $.ajax({
                   type:"POST",
                   url:"<%:Url.Action("Save_tep","CardTemplateDesignMain") %>",
                   data:"tep_name="+tep_name+"&itemTep="+itemTep+"",
                   cache:false,
                   success:function(txt){
                     alert(txt);
                     }
                  })  
          }
        
    }

    //导图
     function InputPic(){
     //$("#fileUP").click();
     // if ($("#fileUP").val().length > 0) {
      //     ajaxFileUpload();

      // }
       
     }


       //ajax上传文件
    function ajaxFileUpload() {
        $.ajaxFileUpload
            (
                {
                    url: '<%:Url.Action("inputPic","CardTemplateDesignMain") %>',
                    secureuri:false,
                    fileElementId: 'fileUP',
                    dataType: 'HTML',
                    success: function (data, status) {
                     
                        document.getElementById("show_tep").style.backgroundImage = "url("+data+")";
                    },
                    error: function (data, status, e)//服务器响应失败处理函数
                    {
                        alert(e);
                    }
                }
            )
        return false;
    }

    //清空
    function remove_all() {
        $("#select2 option").appendTo("#select1");
        $(".show_tep").children().remove();
        $(".txt_dgv").val("");
    }

</script>

<script type="text/javascript">
    $(function () {
          //添加
        $('#add').click(function () {
            if ($('#select1 option:selected').length != 1) {
                return false;
            }
            var select1 = document.getElementById("select1");
            var length = $('#select1 option:selected').length;
            var x = select1.selectedIndex;
            $('.show_tep').append('<label class="itemLabel">' + select1.options[x].text + '</label><br/>'); 
            $('#select1 option:selected').appendTo('#select2');
        });
         //移除
        $('#remove').click(function () {

            if ($('#select2 option:selected').length != 1) {
                return false;
            }
            var select2 = document.getElementById("select2");
            var length = $('#select2 option:selected').length;
            var x = select2.selectedIndex; 
            var itemtex = select2.options[x].text; 
            if (itemtex == $('.show_tep').children('label').eq(x).text()) {
                $('.show_tep').children('label').eq(x).remove();
                $('.show_tep').children('br').eq(x).remove();
                } 
            $('#select2 option:selected').appendTo('#select1');
        });

     
    });
    //置顶
    function toTop() {

        if ($('#select2 option:selected').length != 1) {
            return false;
        }
        var select2 = document.getElementById("select2");
        var x = select2.selectedIndex; 
        var txt = $('#select2 option:selected').text();
        if (txt == $('.show_tep').children('label').eq(x).text()) {
            $('.show_tep').children('label').eq(x).remove();
            $('.show_tep').children('br').eq(x).remove();
        }
        $("<label class='itemLabel'>" + txt + "</label><br/>").insertBefore($('.show_tep').children('label').eq(0));
        $('#select2 option:selected').prependTo('#select2');

    }
    //上移
    function UP() {
        if ($('#select2 option:selected').length != 1) {
            return false;
        }
       
        var optionIndex = $('#select2').get(0).selectedIndex;
        if (optionIndex == 0) {
            return false;
        }
        var txt = $('#select2 option:selected').text();
        $("<label class='itemLabel'>" + txt + "</label><br/>").insertBefore($('.show_tep').children('label').eq(optionIndex-1))
        $('.show_tep').children('label').eq(optionIndex+1).remove();
        $('.show_tep').children('br').eq(optionIndex+1).remove();
        if (optionIndex > 0) {
            $('#select2 option:selected').insertBefore($('#select2 option:selected').prev('option'));
        }
    }
    //下移
    function Down() {

        if ($('#select2 option:selected').length != 1) {
            return false;
        }
         
        //索引的长度,从1开始  
        var optionLength = $('#select2')[0].options.length;
        //选中的索引,从0开始  
        var optionIndex = $('#select2').get(0).selectedIndex;
        if (optionIndex >= (optionLength - 1)) {
            return false;
        }
        var txt = $('#select2 option:selected').text();
        $("<label class='itemLabel'>" + txt + "</label><br/>").insertAfter($('.show_tep').children('br').eq(optionIndex+1))
        $('.show_tep').children('label').eq(optionIndex).remove();
        $('.show_tep').children('br').eq(optionIndex).remove();

        if (optionIndex < (optionLength - 1)) {
            $('#select2 option:selected').insertAfter($('#select2 option:selected').next('option'));
        }
    }
    //置底
    function toBottom() {
        if ($('#select2 option:selected').length != 1) {
            return false;
        }
        var optionLength = $('#select2')[0].options.length;
        var optionIndex = $('#select2').get(0).selectedIndex;
        if (optionIndex >= (optionLength - 1)) {
            return false;
        }
        var txt = $('#select2 option:selected').text();
        if (txt == $('.show_tep').children('label').eq(optionIndex).text()) {
            $('.show_tep').children('label').eq(optionIndex).remove();
            $('.show_tep').children('br').eq(optionIndex).remove();
        }
        $("<label class='itemLabel'>" + txt + "</label><br/>").insertAfter($('.show_tep').children('br').eq(optionLength-2));
        $('#select2 option:selected').appendTo('#select2');

    }
    //添加广告
    function add_dgv() {
        var dgv = $(".txt_dgv").val();
        var str = "";
        if (dgv.length > 0) {
            var count = parseInt(dgv.length / 13) + 1;
            for (var i = 0; i <count; i++) {
                if (i == 0) {
                    str = dgv.substring(0, 13);
                    $('.show_tep').append("<label class='itemLabel'>" + str + "</label><br/>");
                }
                else {
                    str = dgv.substring(i * 13, i * 13 + 13);
                    $('.show_tep').append("<label class='itemLabel'>" + str + "</label><br/>");
                }
               
            }
          
        }

    }

    //关闭窗口
    function closeWindows() {
        window.location.href = "/Loading/Index/?src=/Desktop/Index/";
    }
</script>